import { Button, Col, Row, message } from "antd";
import { useCallback, useEffect, useState } from "react";
import "./App.css";
const App = () => {
  const [seatChart] = useState([
    ["李志鹏"],
    ["赵松杰", "辽西正", "找河阳", "班长"],
    ["陈志源", "马姐成", "张慧琳", "王宇"],
  ]);
  const [isStart, setIsStart] = useState(false)
  const [pos, setPos] = useState({
    x: -1,
    y: -1,
  });

  const getRandomInt = useCallback(function (min: number, max: number) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }, []);

  const getRandomPos = () => {
    const x = getRandomInt(0, 2);
    const y = getRandomInt(0, 3);
    if (seatChart[x][y]) {
      setPos({ x, y });
    } else {
      getRandomPos();
    }
  };

  const startPlay = () => {
    setIsStart(true)
    const timer = setInterval(() => {
      getRandomPos();
    }, 50);

    setTimeout(() => {
      clearInterval(timer);
      setIsStart(false)
    
    }, 3000);
  };

  useEffect(() => {
    if(!isStart && pos.x >= 0) {
      message.success(`恭喜中奖的是${seatChart[pos.x][pos.y]}`);
    }
  }, [pos, isStart])

  return (
    <div className="app">
      <div>
        {seatChart.map((v, x) => {
          return (
            <Row key={x}>
              {v.map((v, y) => {
                return (
                  <Col
                    span={6}
                    key={y}
                    className={
                      x === pos.x && y === pos.y ? "item active" : "item"
                    }
                  >
                    {v}
                  </Col>
                );
              })}
            </Row>
          );
        })}
      </div>
      <div style={{ marginTop: 10 }}>
        <Button type="primary" onClick={() => startPlay()}>
          开始提问
        </Button>
      </div>
    </div>
  );
};

export default App;
